<!DOCTYPE html>
<html lang="en">
<!--注意：引入thymeleaf的名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<base th:href="@{/}">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 - Bootstrap Admin Theme</title>

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link th:href="@{/vendor/metisMenu/metisMenu.min.css}" rel="stylesheet">

    <!-- DataTables CSS -->
    <link th:href="@{/vendor/datatables-plugins/dataTables.bootstrap.css}" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link th:href="@{/vendor/datatables-responsive/dataTables.responsive.css}" rel="stylesheet">

    <!-- Custom CSS -->
    <link th:href="@{/dist/css/sb-admin-2.css}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link th:href="@{/vendor/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<style type="text/css">
		.top-buffer { margin-top:2px; }
	</style>
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">SB Admin v2.0</a>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-messages">
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                                </div>
                                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>Read All Messages</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-messages -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-tasks">
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 1</strong>
                                        <span class="pull-right text-muted">40% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                            <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 2</strong>
                                        <span class="pull-right text-muted">20% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                            <span class="sr-only">20% Complete</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 3</strong>
                                        <span class="pull-right text-muted">60% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                            <span class="sr-only">60% Complete (warning)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <p>
                                        <strong>Task 4</strong>
                                        <span class="pull-right text-muted">80% Complete</span>
                                    </p>
                                    <div class="progress progress-striped active">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                            <span class="sr-only">80% Complete (danger)</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Tasks</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-tasks -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-alerts">
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-comment fa-fw"></i> New Comment
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                    <span class="pull-right text-muted small">12 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-envelope fa-fw"></i> Message Sent
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-tasks fa-fw"></i> New Task
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <div>
                                    <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                    <span class="pull-right text-muted small">4 minutes ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a class="text-center" href="#">
                                <strong>See All Alerts</strong>
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- /.dropdown-alerts -->
                </li>
                <!-- /.dropdown -->
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                        </li>
                        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                        </li>
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li class="sidebar-search">
                            <div class="input-group custom-search-form">
                                <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                            </div>
                            <!-- /input-group -->
                        </li>
                        <li>
                            <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="flot.html">Flot Charts</a>
                                </li>
                                <li>
                                    <a href="morris.html">Morris.js Charts</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>
                        </li>
                        <li>
                            <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="panels-wells.html">Panels and Wells</a>
                                </li>
                                <li>
                                    <a href="buttons.html">Buttons</a>
                                </li>
                                <li>
                                    <a href="notifications.html">Notifications</a>
                                </li>
                                <li>
                                    <a href="typography.html">Typography</a>
                                </li>
                                <li>
                                    <a href="icons.html"> Icons</a>
                                </li>
                                <li>
                                    <a href="grid.html">Grid</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="#">Second Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Second Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level <span class="fa arrow"></span></a>
                                    <ul class="nav nav-third-level">
                                        <li>
                                            <a href="#">Third Level Item</a>
                                        </li>
                                        <li>
                                            <a href="#">Third Level Item</a>
                                        </li>
                                        <li>
                                            <a href="#">Third Level Item</a>
                                        </li>
                                        <li>
                                            <a href="#">Third Level Item</a>
                                        </li>
                                    </ul>
                                    <!-- /.nav-third-level -->
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="blank.html">Blank Page</a>
                                </li>
                                <li>
                                    <a href="login.html">Login Page</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header" th:text="${stationIdWellModeMap.station_name }"></h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">

                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myinsertWellModes" onclick="wellgetstationId()">新增井</button>

                    <!-- 井新增模态框 -->
                    <div class="modal fade" id="myinsertWellModes">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">

                                <!-- 模态框头部 -->
                                <div class="modal-header">
                                    <img width="40px;" height="40px;" alt="2" src="images/logo.jpg">
                                    <h4 class="modal-title">新增油井</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <!-- 模态框主体 -->
                                <div class="modal-body">
                                    <form action="wellmode/insertwellMode.do" method="post" onsubmit="return subInsertWellMode()">
                                        <table align="center">
                                            <tr>
                                                <!-- <th>站id:&nbsp;&nbsp;&nbsp;</th> -->
                                                <td>
                                                    <input name="station_id" th:value="${param.station_id }" type="hidden">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>井号:</th>
                                                <td>
                                                    <input name="well_namber" id="well_namber" type="text">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>井类别:</th>
                                                <td>
                                                    <select name="well_type">
                                                        <option value="1" selected="selected">油井</option>
                                                        <option value="2">水井</option>
                                                        <option value="3">气井</option>
                                                    </select>
                                                </td>
                                            </tr>

                                        </table>
                                        <hr>
                                        <p align="center">
                                            <button type="submit" class="btn btn-primary btn-lg">
                                                提交
                                            </button>
                                        </p>
                                    </form>
                                </div>
                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary"
                                            data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            井信息列表
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>站名称</th>
                                    <th>井id</th>
                                    <th>井号</th>
                                    <th>井类别</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="well_modetables" th:each="wellmodelist,numStatus:${stationIdWellModeMap.wellmodeList}">
                                <!-- <tr>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>1</td>
                                </tr> -->
                                    <tr class="odd gradeX">
                                        <td th:text="${numStatus.count}"></td>
                                        <td th:text="${wellmodelist.station_name}"></td>
                                        <td th:text="${wellmodelist.well_id}"></td>
                                        <td>
                                            <a th:href="@{metervalue/selectBywellNamber.do(well_namber=${wellmodelist.well_namber})}" th:text="${wellmodelist.well_namber}"></a>
<!--                                             <a href="${ctx }/getTables.do?well_namber=${wellMode.well_namber }">${wellMode.well_namber }</a>-->
                                        </td>
<!--                                        <td>${wellMode.well_type }</td>-->
                                        <td th:text="${wellmodelist.well_type}"></td>
                                        <td>
                                            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalRegister" th:data-wellnumber="${wellmodelist.well_namber}"  th:onclick="insertmeterMode(this.getAttribute('data-wellnumber'))">新增仪表</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                            <!-- 仪表基础信息新增 -->
                            <div class="modal fade" id="myModalRegister">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">

                                        <!-- 模态框头部 -->
                                        <div class="modal-header">
                                            <img width="40px;" height="40px;" alt="2" src="images/logo.jpg">
                                            <h4 class="modal-title">仪表基础信息新增</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>
                                        <!-- 模态框主体 -->
                                        <div class="modal-body">
                                            <form action="metervalue/insertByMeterValue.do" method="post" onsubmit="return subInsertMeterValue()">
                                                <table align="center">
                                                    <tr>
                                                        <!-- <th>站id:&nbsp;&nbsp;&nbsp;</th> -->
                                                        <td>
                                                            <input name="station_id" id="setstation_id1" th:value="${param.station_id }" type="hidden" value="">
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <!-- <th>井号:&nbsp;&nbsp;&nbsp;</th> -->
                                                        <td>
                                                            <input name="well_namber" id="well_namberinput" type="hidden" value="">
                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <th>安装位置:&nbsp;&nbsp;&nbsp;</th>
                                                        <td>
                                                            <input name="well_location" id="well_location" type="text">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th>仪表编号:&nbsp;&nbsp;&nbsp;</th>
                                                        <td>
                                                            <input name="meter_number" id="meter_number" type="text" placeholder="" onblur="selectMeterValueByMeter_Sn()">

                                                            <font size="1" color="gray" id="meter_snEx"></font>

                                                        </td>
                                                    </tr>

                                                    <tr>
                                                        <th>仪表名称:&nbsp;&nbsp;&nbsp;</th>
                                                        <td>
                                                            <input name="meter_name" id="meter_name" type="text">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th>厂家:&nbsp;&nbsp;&nbsp;</th>
                                                        <td>
                                                            <input name="meter_manufactor" id="meter_manufactor" type="text">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th>网络类型:&nbsp;&nbsp;&nbsp;</th>
                                                        <td>
                                                            <input name="meter_network_type" id="meter_network_type" type="text">
                                                        </td>
                                                    </tr>
                                                </table>
                                                <hr>
                                                <p align="center">
                                                    <button type="submit" class="btn btn-primary btn-lg" >
                                                        提交
                                                    </button>
                                                </p>
                                            </form>
                                        </div>
                                        <!-- 模态框底部 -->
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.table-responsive -->
                            <div class="well">
                                <h4>DataTables Usage Information</h4>
                                <p>DataTables is a very flexible, advanced tables plugin for jQuery. In SB Admin, we are using a specialized version of DataTables built for Bootstrap 3. We have also customized the table headings to use Font Awesome icons in place of images. For complete documentation on DataTables, visit their website at <a target="_blank" href="https://datatables.net/">https://datatables.net/</a>.</p>
                                <a class="btn btn-default btn-lg btn-block" target="_blank" href="https://datatables.net/">View DataTables Documentation</a>
                            </div>
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>

        </div>
		
		
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script>
        //新增井的时候数据不完整不能提交
        function subInsertWellMode(){
            var well_namberdoc = document.getElementById("well_namber");
            if(well_namberdoc == null || well_namberdoc.value == ""){
                alert("井号不能为空")
                return false;
            }
        }
        //新增仪表的时候数据不完整不能提交
        function subInsertMeterValue(){
            var well_location = document.getElementById("well_location");
            var meter_number = document.getElementById("meter_number")
            var meter_name = document.getElementById("meter_name");
            var meter_manufactor = document.getElementById("meter_manufactor");
            var meter_network_type = document.getElementById("meter_network_type");
            if(well_location.value == ""){
                alert("安装位置不能为空")
                return false;
            }
            if(meter_number.value == ""){
                alert("仪表编号不能为空");
                return  false;
            }
            if(meter_number.placeholder = true){
                alert("您填写的仪表编号已存在请核实后再进行操作")
                return  false;
            }
            if(meter_name.value == ""){
                alert("仪表名称不能为空");
                return false;
            }
            if(meter_manufactor.value == ""){
                alert("厂家不能为空");
                return  false;
            }
            if(meter_network_type.value == ""){
                alert("网络类型不能为空");
                return  false;
            }
        }
        //点击新增仪表的时候获取井号并将值传入input中
        function insertmeterMode(well_namber){
            console.log(well_namber)
            var well_namberinput = document.getElementById("well_namberinput");
            well_namberinput.value = well_namber;
        }
        //异步请求去查询这个仪表编号在表meter_value中是否存在
        function selectMeterValueByMeter_Sn(){
            //获取仪表编号
            var meter_numberinput = document.getElementById('meter_number').value
            /* alert(meter_numberinput) */
            //异步请求接口查询meter_value中是否是有这个仪表编号的数据
            $.ajax({
                url:'metervalue/selectMeterValueByMeterSn.do',
                dataType :'json',
                data: {'meter_sn':meter_numberinput},
                type :'POST',
                success : function(reqs) {
                    //如果有将提示信息 如果返回的信息为ture那么就代表有数据进行提示信息展示如果为false代表没查询到
                    /* console.log(reqs.meter_sn); */
                    if(reqs == true){
                        alert("仪表编号已存在"+meter_numberinput);
                        console.log(reqs);
                        var meter_numberplaceholder = document.getElementById('meter_number').placeholder;
                        meter_numberplaceholder = reqs;
                        console.log("修改后的提示值"+meter_numberplaceholder)
                    }else{
                        console.log(reqs);
                        var meter_numberplaceholder = document.getElementById('meter_number').placeholder;
                        meter_numberplaceholder = reqs;
                    }

                }
            })
        }
    </script>

    <!-- Bootstrap Core JavaScript -->
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script th:src="@{/vendor/metisMenu/metisMenu.min.js}"></script>

    <!-- DataTables JavaScript -->
    <script th:src="@{/vendor/datatables/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/vendor/datatables-plugins/dataTables.bootstrap.min.js}"></script>
    <script th:src="@{/vendor/datatables-responsive/dataTables.responsive.js}"></script>

    <!-- Custom Theme JavaScript -->
    <script th:src="@{/dist/js/sb-admin-2.js}"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true
        });
    });
    </script>

</body>

</html>
